<template>
    <div class="container">
        <el-page-header @back="goBack" content="查看邀请用户列表"></el-page-header>
        <div class="e-m-t-45">
            <div class="flex">
                <div class="e-flex-1">
                    <span style="color: #606266;font-size: 13px;">目前绑定邀请用户数：</span>
                    <span class="num">{{ total }}人</span>
                </div>

                <el-form :inline="true">
                    <!-- <el-form-item label="负责区域" prop="cityid">
                        <el-cascader separator="-" @change="SelectCity" filterable :props="{
                            lazy: true,
                            checkStrictly: true,
                            lazyLoad: loadCity,
                            label: 'name',
                            value: 'id'
                        }" style="width: 100%;margin-right: 20px"></el-cascader>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="state" placeholder="请选择">
                            <el-option v-for="item in statelist" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                    <el-form-item>
                        <el-input placeholder="关键字搜索" prefix-icon="el-icon-search" clearable v-model="key"
                            @clear="getList"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column fixed prop="name" label="用户名">
            </el-table-column>
            <el-table-column prop="isenterprise" label="用户类型" width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.isenterprise">客户组</span>
                    <span v-else>用户</span>
                </template>
            </el-table-column>
            <el-table-column prop="createdate" label="推广时间" width="300">
            </el-table-column>
            <!-- <el-table-column prop="money" label="累计佣金（元）" width="300">
            </el-table-column> -->
            <!-- <el-table-column prop="usestate" label="状态" width="150">
                <template slot-scope="scope">
                    <span class="color-success" v-if="scope.row.usestate == '已启用'">{{ scope.row.usestate }}</span>
                    <span class="color-danger" v-else>{{ scope.row.usestate }}</span>
                </template>
            </el-table-column> -->
            <el-table-column label="操作" fixed="right" width="180">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="unbindingPromotion(scope.row)">解绑</el-button>
                    <el-button type="text" size="small" @click="userDetails(scope.row.id,scope.row.isenterprise)">查看用户</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="table-pagination">
            <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
                @size-change="handleSizeChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '查看邀请用户列表' 
        }
    },
    data() {
        return {
            id: 0,
            page: 1,
            pageSize: 10,
            total: 0,
            tableData: [

            ],
            key: '',
            type: 1
        }
    },
    mounted() {
        this.id = this.$route.query.id
        this.type = this.$route.query.type
        this.getList()
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        getList() {
            this.tableData = []

            this.$axios.post('/Promoter/Customer/List', {
                "PageIndex": this.page,
                "PageSize": this.pageSize,
                "key": this.key,
                "PromotionUserType": this.type,
                "promoterUserId": this.id
            }).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
            })
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
            this.getList()
        },
        unbindingPromotion(row){ //解绑推广人
            console.log(row)
            let api = ''
            if(row.isenterprise){
                api = '/Enterprise/UnBindPromoter'
            }else{
                api = '/Promoter/UnBind'
            }
            this.$confirm('解绑推广人后，将不再将此用户的回收订单记录到推广人账上', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.get(api+'?id='+row.id).then((res) => {
                    this.$message.success('解绑成功');
                    this.getList()
                })
            })
        },
        userDetails(id,isenterprise){
            if(isenterprise){
                this.$router.push('/Enterprise/views?id='+id)
            }else{
                this.$router.push('/user/views?id='+id)
            }
        },
    }
}
</script>

<style lang="scss" scoped>
    .num{
        font-size: 18px;
        color: #303133;
    }
</style>
